<template>
	<div class="PcSearch">
		<div class="search">
			<input type="search" v-model="keys"/>
			<button @click="search()"><i class="el-icon-search"></i></button>
		</div>
		<router-link to="/pc/home">返回首页</router-link>
		<div class="show">
			<div class="lie">
				<p class="all"  @click="find(0)">全部类型-默认</p>
				<ul v-for="(item,i) in filer" :key="item.id">
					<li  v-for="(index,j) in item.list" :key="index.id">
						<p @click="find(index.id)">{{item.name}}/{{index.name}}</p>
					</li>
				</ul>
			</div>
			<div class="showing">
				<ul>
					<li v-for="(item,i) in newlist" :key="item.id">
					<div class="box">
							<div class="box1">
								<router-link :to="`/pc/bookDetail/${item.id}`">
									<img  :src="`${$ip}/api/public/showimg/${item.pic}`"/>
								</router-link>	
							</div>
								<div class="box2">
									<h3 v-html="item.name"></h3>
									<span style="color: red;">￥{{item.price}}</span>
									<p class="p1" >{{item.author}}/{{findDate(item.tmake)}}/{{item.maker}}</p>
									<p v-html="item.info"></p>
									<button @click="addCart(item.id)"><i class="el-icon-shopping-cart-2"></i>加入购物车</button>
								</div>	
					       </div>
					</li>
				  </ul>
				<div>
			</div>
		</div>
	</div>	
	<div class="page" v-show="totals.length != 0">
		<ul>
			<li @click="page(-1)"><span ><</span></li>
			<li v-for="(item,i) in totals"  @click="page2(item)"><span >{{item}}</span></li>
			<li @click="page(1)"><span >></span></li>
		</ul>
	</div>
</div>
</template>

<script>
	export default{
		name:'PcSearch',
		data() {
			return{
				id:0,
				keys:'',
				newlist:[],
				start:1,
				num:5,
				total:0,
				types:[],
				totals:[],
			}
		},
		computed:{
			findDate(){
				return (val)=>{
					let y = new Date(val).getFullYear();
					let m = new Date(val).getMonth();
					let r = new Date(val).getDate();
					return `${y}-${m}-${r}` ;
				}
			},
			filer(){
				let m = this.types;
				let arr = [];
				for(let i=0; i<m.length; i++){
					let arr2 = [];
					for(let j=i; j<m.length; j++){
						if(m[i].id == m[j].pid){
							arr2.push(m[j]);
						}
						m[i].list = arr2;
					}
					arr.push(m[i]);
				}
				return arr;
			}
		},
		methods:{
			addCart(id){
				this.$get('/api/public/addCart/'+id).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					
				})
			},
			tol(){
				this.totals=[];
				if(this.total < this.num) return;
				let m = this.total/this.num;
				console.log(m);
				if(m != 0){
					m++;
				}
				console.log(m);
				for(let i=1; i<m; i++){
					this.totals.push(i);
			 	}
				console.log(this.totals);
			},
			page2(num){
				this.start = num;
				this.find(this.id);
			},
			page(num){
				 let m = this.start+= num;;
				if(m > this.totals.length || m <1 ){
					this.start = 1;
					console.log("kkkkkkkkkkkk");
				}
				console.log(this.start);
				this.find(this.id);
			},
			find(id){
				this.id = id;
				this.newlist = [];
				this.$get(`/api/public/findPageBook/${this.start}/${this.num}/${id}`).then((resp)=>{
					this.newlist = resp.data.data.books;
					this.total =  resp.data.data.total;
					this.tol();
					console.log(this.total);
				})
			},
			search(){
				this.newlist = [];
				this.$postkv(`/api/public/book/findPageKey/${this.start}/${this.num}`,{key:this.keys}).then((resp)=>{
					this.newlist = resp.data.data.books;
					this.total = resp.data.data.total;
					console.log(resp.data);
				})
			}
		},
		mounted() {
			this.keys = this.$route.query.key;
			console.log(this.$route.query.key);
			console.log(this.$route.query.typeid);
			if(this.keys == '' || this.keys == undefined){
				if(this.$route.query.typeid !=undefined){
					this.find(this.$route.query.typeid);
				}else{
					this.find(0);
				}
			}else{
				this.search();
			}
			this.$get('/api/public/type/findAll2').then((resp)=>{
				this.types = resp.data.data;
				console.log(resp.data);
			})
			
		}
	}
</script>

<style scoped>
	a{
		color: black;
	}
	.PcSearch{
		width: 80%;
		margin: 20px auto;
	}
	.search{
		display: flex;
		justify-content: center;
	}
	.search input{
		width: 500px;
		height: 40px;
		border: 2px solid red;
		outline: none;
		text-indent: 20px;
	}
	.search button{
		height: 40px;
		width: 50px;
		color: white;
		background-color: red;
		font-size: 20px;
		border: none;
	}
	.show{
		width: 100%;
		border-top: 2px solid red;
		margin-top: 20px;
		display: flex;
	}
	.show .lie{
		width: 25%;
		/* background-color: aqua; */
		margin-top: 20px;
	}
	.show .lie .all{
		width: 90%;
		display: block;
		height: 30px;
		line-height: 30px;
		text-indent: 20px;
		position: relative;
	}
	
	.show .lie ul{
		width: 100%;
		
	}
	.show .lie ul li{
		width: 100%;
		height: 30px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.show .lie ul li p{
		text-indent: 20px;
		display: block;
		width: 90%;
		position: relative;
	}
	.show .lie  p:hover{
		border: 2px solid red;
	}
	.show .showing{
		width: 75%;
		margin-top: 20px;
		display: flex;
		
	}
	
	.showing ul {
		width: 100%;
	}
	.showing ul li{
		width: 100%;
		display: flex;
		margin-bottom: 10px;
	}
	.showing ul li:hover{
		background-color: #fdf4f2;
	}
	.showing .box{
		width: 95%;
		height: 95%;
		display: flex;
		/* background-color: aqua; */
		align-items: center;
		margin: 0 auto;
	}
	.showing .box1{
		width: 20%;
		height: 100%;
		background-color: white;
		text-align: center;
	}
	.showing .box1 img{
		width: 80%;
		height: 90%;
		align-items: center;
	}
	.showing  .box2{
		width: 80%;
		height: 90%;
		overflow-wrap: normal;
		/* background-color: aqua; */
	}
	.showing .box2 span{
		display: block;
		font-weight: 900;
		font-size: 20px;
		margin-top: 10px;
	}
	.showing .box2 .p1{
		display: block;
		margin-bottom: 10px;
		color: deepskyblue;
		font-size: 12px;
	}
	.showing .box2 button{
		width: 120px;
		height: 30px;
		background-color: red;
		color: white;
		border: none;
		outline: none;
		border-radius: 3px;
		font-size: 15px;
		margin-top: 20px;
	}
	.page{
		width: 100%;
	}
	.page ul{
		width: 100%;
		display: flex;
		margin-left: 60%;
	}
	.page ul li{
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		background-color: unset;
		margin-left: 10px;
		border-radius: 3px;
		box-shadow: 0px 0px 2px 0px;
	}
	.page ul li:hover{
		background-color: #439df1;
		color: white;
	}
</style>